<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>#舍不得删掉的照片# 获奖名单</title>
    <meta name="description" content="快来看看你有没有中奖吧！" />
    <link rel="stylesheet" href="/static/css/huati/shareList.css">
    <script src="/static/js/flexible.js"></script>
    <script src="/static/js/jquery.2.1.4.min.js"></script>
</head>
<body>
<script src="/static/js/common/Monitor.js"></script>
<div class="contain">
    <div class="contain_top">
        <div class="container_luckyList">
            <div class="luckyList_left">
                <video poster="/static/img/huati/choujiang/winnerList/chouj.png" src="https://huakai-static.oss-cn-shenzhen.aliyuncs.com/manual/activity/choujiang/choujiang.mp4" width="320" height="240" controls="controls">
                </video>
            </div>
            <ul class="luckyList_right">
                <li>
                    <img src="http://huakai-api.oss-cn-shenzhen.aliyuncs.com/user_header/user_header_12839670_1532263819908.jpeg" alt="">
                    <span>洋气大美人</span>
                    <b></b>
                </li>
                <li>
                    <img src="http://huakai-api.oss-cn-shenzhen.aliyuncs.com/user_header/user_header_73028516_1543796277086.jpeg" alt="">
                    <span>爱吃鱼的喵</span>
                    <b></b>
                </li>
                <li>
                    <img src="http://huakai-api.oss-cn-shenzhen.aliyuncs.com/user_header/user_header_69852437_1538044793475.jpeg" alt="">
                    <span>程程</span>
                    <b></b>
                </li>
            </ul>
            <div class="luckyList_bottom"></div>
        </div>
    </div>
    <div class="contain_bottom">
        <h1></h1>
        <div class="bottom_k">
            <div class="title">
                <span style="width:1.2rem ">头像</span>
                <span  style="width: 2rem;">昵称</span>
                <span style="width: 1.3rem">奖品</span>
                <span style="width: 1.7rem">时间</span>
                <span style="width: 1.1rem">批次</span>
            </div>
            <div id="box">
                <ul id="ul1">
                    <!--<li>-->
                    <!--<p class="head_pic"><img  src="http://huakai-api.oss-cn-shenzhen.aliyuncs.com/user_header/user_header_2468759_1542448518848.jpeg" alt=""></p>-->
                    <!--<b style="width: 2rem;">米朵</b>-->
                    <!--<p class="jiangpin"><img src="/static/img/huati/sharePhoto/jiangpin.png" alt=""></p>-->
                    <!--<b style="width: 1.7rem">2018.12.08</b>-->
                    <!--<b style="width: 1.1rem">第1批</b>-->
                    <!--</li>-->
                </ul> <ul id="ul2"></ul>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        fillList();
    })
    function fillList(){
        $.ajax({
            url: "allnamelist.json",
            type: "GET",
            dataType: "json",
            success: function(data) {
                filldata(data)
            }
        });
    }
    function filldata(data){
        var str='';
        $.each(data, function(i, item) {
            str+="<li>";
            str+="<p class='head_pic'><img  src='"+item.head_pic+"' alt=''></p>" ;
            str+="<b style='width: 2rem;'>"+item.nick_name+"</b>" ;
            str+="<p class='jiangpin'><img src='/static/img/huati/sharePhoto/jiangpin.png' alt=''></p>" ;
            str+="<b style='width: 1.7rem'>"+item.time+"</b>" ;
            str+="<b style='width: 1.1rem'>"+item.batch+"</b>";
            str+="</li>"
        })
        $("#ul1").html(str);
        lunbo();
    }
    function lunbo() {
        var ul1sH=$("#ul1")[0].scrollHeight;
        var h=0;
        var ulH=$("#box").height();
        if(ul1sH>ulH){
            roll(20)
        }
        function roll(t){
            var ul1 = $("#ul1").html();
            $("#ul2").html(ul1);
            setInterval(rollStart,t)
        }
        function rollStart() {
            if (h >=ul1sH) {
                h=0;
                $("#box").scrollTop(h)
            } else {
                h++;
                $("#box").scrollTop(h)
            }
        }
    }

</script>
</body>
</html>